<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 输入框，提交新建待办任务 -->
        <!-- 这里@submit.prevent是vue.js中的事件修饰符用法，表示在表单提交时阻止默认行为（页面刷新） -->
        <form @submit.prevent="addTask">
            <span>新任务</span>
            <input v-model="taskText" placeholder="请输入任务..." />
            <button>添加</button>
        </form>
        <!-- 遍历列表 -->
        <ol>
            <li v-for="(task,index) in todos" :key="index">
                {{task}}
                <button @click="remove(index)">删除</button>
                <hr>
            </li>
        </ol>
    </div>

<script>
    const {createApp,ref} = Vue
    const config = {
        setup() {
            // 定义数据
            const todos = ref([])
            const taskText = ref('')

            // 定义方法
            /* 新增任务 */
            const addTask = () => {
                if (taskText.value.length === 0) {
                    alert("请输入任务")
                    return
                }
                todos.value.push(taskText.value)
                taskText.value = ''
            }
            /* 根据索引移除任务 */
            const remove = (index) => {
                todos.value.splice(index, 1)
            }

            // 向外暴露数据和方法
            return {todos,taskText,addTask,remove}
        }
    }
    app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>